<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有账户</title>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>

<div id="app">
    <div v-show="isShow">
        <table border="1" cellpadding="0" width="400px" align="center">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>money</th>
                <th>操作</th>
            </tr>
            <tr v-for="(account,index) in accountList">
                <td v-html="index+1"></td>
                <td v-html="account.name"></td>
                <td v-html="account.money"></td>
                <td>
                    <input type="button" value="删除" @click="deleteById(account.id)"/>
                    <input type="button" value="更新" @click="selectById(account.id)"/>
                </td>
            </tr>
        </table>
    </div>
    <div v-if="isIf">
        <form onsubmit="return false">
            id  : <input type="text" name="id" v-model="account1.id"/><br/>
            账户：<input type="text" name="name" v-model="account1.name"/><br/>
            金额：<input type="text" name="money" v-model="account1.money"/><br/>
            <input type="submit" value="修改" @click="uptAccount()"/><br/>
        </form>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            accountList: [],
            isShow:true,
            isIf:false,
            account1:{}
        },
        methods: {
            //查询所有
            findAll() {
                axios.get("/account/findAll").then(response => {
                    this.accountList = response.data.result;
                }).catch(error => {
                    console.log(error);
                })
            },
            uptAccount() {
                let params = this.account1;
                axios.put("/account/update",params).then(response => {
                    if (response.data.flag) {
                        //this.findAll();
                        location.href = "accountList.html"
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            //删除账户
            deleteById(id) {
                axios.delete("/account/" + id).then(response => {
                    if (response.data.flag) {
                        this.findAll();
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            selectById(id) {
                axios.get("/account/update/" + id).then(response => {
                    alert(response.data.result);
                    if (response.data.flag) {

                        this.isShow=false;
                        this.isIf=true;
                        this.account1=response.data.result;
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
        },
        created() {
            this.findAll();
        }
    });
</script>
</body>
</html>